<template>
    <div>
        <SiceTitle :content="siceTitleContent"/>
        <el-row class="list">
            <img src="@/assets/img/introduce/culture/qiyewenhua_lx.png" alt="qiyewenhua_lx">
        </el-row>
        <!-- <el-row class="list" type="flex">
            <el-col class="item" v-for="item in list" :key="item.title">
                <img :src="item.icon" alt="icon">
                <p>{{item.title}}</p>
                <p>{{item.stitle}}</p>
            </el-col>
        </el-row> -->
        <el-row class="alert">
            <p v-for="item in list2" :key="item">{{item}}</p>
        </el-row>
        <el-row class="imgbox" type="flex">
            <el-col class="item">
                <img src="@/assets/img/introduce/culture/xingweilinian@2x.png" alt="xingweilinian">
                <p>
                    <span>{{list3[0].title}}</span>
                    {{list3[0].stitle}}
                </p>
            </el-col>
            <el-col class="item">
                <img src="@/assets/img/introduce/culture/竞争意识@2x.png" alt="jingzhengyishi">
                <p>
                    <span>{{list3[1].title}}</span>
                    {{list3[1].stitle}}
                </p>
            </el-col>
            <el-col class="item">
                <img src="@/assets/img/introduce/culture/危机意识@2x.png" alt="weijiyishi">
                <p>
                    <span>{{list3[2].title}}</span>
                    {{list3[2].stitle}}
                </p>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import SiceTitle from './components/siceTitle';
export default {
    components:{SiceTitle},
    data(){
        return {
            siceTitleContent:{
                sice:"CULTURE",
                title:"企业文化",
                titleEn:"CORPORATE CULTURE"
            }
        }
    },
    computed:{
        list(){
            const icons = ["威盾使命",'威盾愿景','核心理念','威盾宗旨','威盾价值观','社会责任感','发展理念','经营理念','人才理念'];
            const _list = this.$t("introduce.culture.list");
            const _resultList= [];
            _list.map((item,i)=> {
                _resultList.push({
                    ...item,
                    icon:require(`@/assets/img/introduce/culture/${icons[i]}@2x.png`)
                })
            })
            return _resultList;
        },
        list2(){
            return this.$t("introduce.culture.list2");
        },
        list3(){
            return this.$t("introduce.culture.list3");
        }
    }
}
</script>

<style lang="less" scoped>
.list {
    flex-wrap: wrap;
    margin-bottom: 20px;
    &>img {
        width: 1221px;
        height: 532px;
    }
    .item {
        flex: 0 0 33.333333%;
        width:33.333333%;
        text-align: left;
        img {
            width: 23px;
        }
        p {
            font-size:20px;
            font-weight:400;
            color:rgba(51,51,51,1);
            line-height:24px;
            &:last-child {
                font-size:12px;
                font-weight:400;
                color:rgba(153,153,153,1);
                line-height:24px;
                margin-bottom: 39px;
            }
        }
    }
}
.alert {
    height:160px;
    margin-bottom: 40px;
    background:rgba(247,250,252,1);
    border-left: 4px solid #7AA8E9;
    padding-left: 44px;
    text-align: left;
    padding-top: 30px;
    p {
        font-size:16px;
        font-weight:400;
        color:rgba(102,102,102,1);
        line-height:28px;
    }
}
.imgbox {
    margin-bottom: 100px;
    .item {
        margin-right: 10px;
        position: relative;
        flex: 0 0 630px;
        p {
            position: absolute;
            left: 0;
            bottom: 0;
            height:60px;
            width: 100%;
            background-color:rgba(247,250,252,.6);
            text-align: left;
            line-height: 60px;
            padding-left: 20px;
            span {
                font-size:20px;
                font-weight:400;
                color:rgba(29,69,102,1);
                display: inline-block;
                margin-right: 17px;
            }
            font-size:14px;
            font-weight:400;
            color:rgba(29,69,102,1);
        }
        &:nth-of-type(2) {
            flex: 0 0 320px;
        }
        &:nth-of-type(3) {
            flex: 0 0 310px;
        }
        img {
            width: 100%;
        }
        &:last-child{
            margin-right: 0;
        }
    }
}
</style>